<template>
	<view class="box">
		<view class="fixed-br" v-if="showTop" @click="toTop">
			<view id='top'>
				<image src="../../static/images/top.png" mode=""></image>
			</view>
		</view>

		<view class="header-comp">
			<view class="header">
				<view class="header-bar" :style="`background:rgba(255, 255, 255, ${opacity});`">
					<view class="fill-height el-flex">
						<view class="header-btn2">
							<image :src="`../../static/images/${leftImg}.png`" mode="" @click="Back"></image>
						</view>
						<view class="placeholder">
							<text class="text-ellipsis" :style="`color: ${textColor};`">{{title}}</text>
						</view>
						<view class="header-btn2 share-btn">
							<image :src="`../../static/images/${rightImg}.png`" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<template v-if="Object.keys(dataInfo).length==0">
			<view class="load">
				<u-loading-page :loading="true"></u-loading-page>
			</view>
		</template>
		<template v-else>
			<view class="component-list-channel">
				<view class="channel_gallery">
					<u-swiper :list="swiperImgList" height='6rem' circular @click="clickSwiperItem" indicator bgColor=''
						indicatorMode="dot"></u-swiper>
				</view>
				<view class="channel_box">
					<view class="channel-tab">
						<view class="scroll-list el-flex">
							<block v-for="(item, index) in channelList" :key="index">
								<view class="scroll-item">
									<image :src="item.img_url" mode="widthFix"></image>
									<view class="scroll-text">
										{{item.title}}
									</view>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
			<view class="divider_line"></view>
			<view class="channel-news-feed">
				<u-sticky bgColor="#fff">
					<view class="tab-bar" @touchmove.stop>
						<u-tabs :list="tabList" keyName='title' lineColor="#ff5934" :current='tabIndex'
							:activeStyle="{color: '#ff5934'}" @click='clickTab'></u-tabs>
					</view>
				</u-sticky>
				<view class="news-feed-box">
					<view class="news-feed">
						<template v-if="dataList.length==0">
							<view class="empty-data">
								<u-empty mode="data" icon="../../static/images/empty.png">
								</u-empty>
							</view>
						</template>
						<template v-else>
							<u-row gutter="5">
								<u-col span="6" v-for="(item,index) in dataList" :key="index">
									<view class="inner-box goods-item  animated pulse">
										<view class="icon-del">
											x
										</view>
										<view class="img-box">
											<LazyLoad :src="item.body.items[0].url" width='100%' height='100%'>
											</LazyLoad>

										</view>
										<view class="text-box">
											<view class="title goods-title">
												{{item.body.items[0].product_name}}
											</view>
											<view class="goods-price">
												<view class="org-price price el-flex">
													<text>¥{{item.body.items[0].product_price}}</text>
													<text class="googs-point">{{item.body.items[0].subtitle}}</text>
												</view>
												<view class="price cur-price">
													¥{{item.body.items[0].prod_org_price}}
												</view>
											</view>
										</view>
									</view>
								</u-col>

							</u-row>
						</template>

					</view>
				</view>
			</view>

		</template>
	</view>
</template>

<script>
	import LazyLoad from '../../components/LazyLoad/LazyLoad.vue'
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			LazyLoad
		},
		data() {
			return {
				opacity: 0,
				leftImg: 'left',
				rightImg: 'search',
				textColor: 'white',
				scrollTop: 0,
				dataInfoList: [],
				tabIndex: 0,
				dataInfo: {},
				dataList: [],
				page_index: 1,
				tabList: [],
				goodId: '',
				showTop: false
			};
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
			if (res.scrollTop >= 200) {
				this.leftImg = 'left_b'
				this.rightImg = 'search_b'
				this.textColor = 'black'
				this.opacity = 1
			} else {
				this.leftImg = 'left'
				this.rightImg = 'search'
				this.textColor = 'white'
				this.opacity = res.scrollTop / 200
			}
		},
		watch: {
			tabIndex: {
				handler(newVal) {
					this.fetchGoodsData()
				},
			},
			scrollTop: {
				handler(newVal) {
					if (newVal >= 700) {
						this.showTop = true
					} else {
						this.showTop = false
					}
				},
				immediate: true
			}
		},
		computed: {
			block_id() {
				return this.tabList[this.tabIndex] && this.tabList[this.tabIndex].block_id
			},
			goodKey() {
				return this.tabList[this.tabIndex] && this.tabList[this.tabIndex].key
			},
			title() {
				return this.dataInfo.body && this.dataInfo.body.title
			},
			swiperImgList() {
				let list = []
				this.dataInfoList.forEach(item => {
					if (item.view_type == "channel_gallery") {
						item.body.items.forEach(item => {
							list.push(item.img_url)
						})
					}
				})
				return list
			},
			channelList() {
				let list = []
				this.dataInfoList.forEach(item => {
					if (item.view_type == "channel_box") {
						list = item.body.items
					}
				})
				return list
			},
		},
		onReachBottom() {
			this.page_index++
			this.fetchGoodsData(true)
		},
		methods: {
			toTop() {
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0,
				})
			},
			Back() {
				uni.navigateBack(-1)
			},
			clickTab(e) {
				this.tabIndex = e.index
				this.page_index = 1
			},
			clickSwiperItem(e) {

			},
			fetchGoodsData(flag) {
				let routes = getCurrentPages();
				let curRoute = routes[routes.length - 1].options
				this.$request.get('/getChannelData_2', {
					page_id: curRoute.id,
					block_id: this.block_id,
					id: this.goodId,
					page_index: this.page_index,
					key: this.goodKey
				}).then((res) => {
					if (flag) {
						this.dataList = this.dataList.concat(res.data.data.sections)
					} else {
						this.dataList = res.data.data.sections
					}
				}).catch(e => {
					console.log('错误了:', e)
				})

			},
			fetchInfoData(id) {
				this.$request.get('/getChannelTab_2', {
					id: id
				}).then((res) => {
					this.dataInfoList = res.data.data.sections
					this.dataInfo = res.data.data.channel_global_config
					this.tabList = res.data.data.channel_product_set.body.items
					this.goodId = res.data.data.channel_product_set.body.id
					this.fetchGoodsData()
				}).catch(e => {
					console.log('错误了:', e)
					uni.navigateTo({
						url: `/subPage/emptyData/emptyData`,
						success() {

						}
					})
				})

			},

		},
		onLoad(e) {

			this.fetchInfoData(e.id)
		},
	}
</script>
<style lang="scss" scoped>
	.box {
		background: #f6f6f6;

		.fixed-br {
			position: fixed;
			z-index: 997;
			bottom: 1.9rem;
			right: 0.38rem;

			#top {
				display: block;
				width: 0.77rem;
				height: 0.77rem;
				margin: 0.1rem auto 0;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.header {
			position: fixed;
			height: .96rem;

			.status-bar {
				position: fixed;
			}

			.fill-height {
				height: .96rem;
				display: flex;
				align-items: center;
				flex: 1 1 auto;
				flex-wrap: nowrap;

				.header-btn2 {
					background: none;
					border-radius: 0;
					display: block;
					width: 0.6rem;
					height: .6rem;
					margin: 0 0.2rem;

					image {
						width: 0.5rem;
						height: .5rem;
					}
				}

				.share-btn {
					image {
						width: 0.6rem;
						height: .6rem;
					}
				}

				.placeholder {
					flex: 1;
					font-size: .3rem;
					text-align: center;

					text {
						font-size: .3rem;
						width: 100%;
					}

				}
			}
		}

	}

	.divider_line {
		border-bottom: 0.16rem solid rgb(246, 246, 246);
		background-color: rgb(246, 246, 246);
	}

	.component-list-channel {
		.channel_gallery {
			width: 100%;
			margin-bottom: -2.2rem;
			background: linear-gradient(180deg, #fff 80%, #f6f6f6);
		}

		.channel_box {
			padding: 0.2rem 0;
			margin: 0 0.24rem;
			background: #fff;
			border-radius: 0.16rem;
			padding-bottom: .15rem;
			position: relative;
			z-index: 11;

			.channel-tab {

				.scroll-list {
					justify-content: space-around;
					flex-wrap: wrap;

					.scroll-item {
						line-height: 1.6;
						width: 20%;
						display: block;
						text-align: center;
						box-sizing: border-box;
						margin-bottom: .12rem;

						image {
							width: 0.86rem;
							margin: 0 auto;
						}

						.scroll-text {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							transform: scale(.98);
							font-size: .22rem;
						}
					}
				}

			}
		}

	}

	.channel-news-feed {
		/deep/.u-sticky {
			z-index: 999;
			top: 0.84rem !important;
		}

		.tab-bar {
			/deep/.u-tabs__wrapper__nav__item__text {
				font-size: .32rem;
				font-weight: 700;
			}

			/deep/.u-tabs__wrapper__nav__item {
				height: 0.7rem !important;
			}

			/deep/.u-tabs__wrapper__nav__item,
			/deep/.u-tabs__wrapper__nav,
			view {
				align-items: center;

			}
		}
	}

	.news-feed-box {

		.empty-data {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate3d(-50%, -50%, 0)
		}

		.news-feed {
			position: relative;
			padding: .2rem;
			min-height: 88vh;

			.u-row {
				margin-left: 0 !important;
				flex-wrap: wrap;

			}

			.u-col {
				margin-bottom: .2rem;
			}

			.goods-item {
				position: relative;
				background: #fff;
				width: 3.28rem;
				border-radius: 0.16rem;
				overflow: hidden;

				.icon-del {
					width: 0.44rem;
					height: 0.44rem;
					position: absolute;
					top: 0;
					right: 0;
				}

				.img-box {
					width: 3.28rem;
					height: 3.28rem;

					/deep/.u-image__image,
					/deep/.u-image {
						width: 3.28rem !important;
						height: 3.28rem !important;
					}

					image {
						width: 3.28rem;
						height: 3.28rem;
					}
				}

				.text-box {
					text-align: left;
					padding: 0.16rem 0.24rem 0.16rem;

					.goods-title {
						height: 0.66rem;
						font-size: .28rem;
						font-weight: 700;
						line-height: 1.2em;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.goods-price {
						font-size: .32rem;
						font-weight: bolder;
						margin: 0.16rem 0 0;
						color: #ff5934;

						.googs-point {
							font-size: .32rem;
							position: relative;
							padding: 0.03rem 0.06rem;
							color: #f22a10;
							transform: scale(.7);
							transform-origin: center center;

							&:before {
								content: "";
								border-color: currentColor;
								border-radius: 0.2rem;
								width: 200%;
								height: 200%;
								transform: scale(.5);
								pointer-events: none;
								box-sizing: border-box;
								position: absolute;
								left: 0;
								top: 0;
								border: 1px solid #999;
								transform-origin: 0 0;
							}
						}

						.org-price {
							justify-content: flex-start;
							line-height: 1em;
							font-size: .32rem;
						}

						.cur-price {
							display: block;
							font-weight: 400;
							text-decoration: line-through;
							font-size: .32rem;
							color: rgba(0, 0, 0, .3);
							transform-origin: left center;
							transform: scale(.7);
						}

					}


				}
			}
		}
	}
</style>